<template>
  <el-form class="add-event-save-img">
    <switch-normal v-if="isUploadImgToServer" v-model="saveImg.comps[2].attrs.isUploadImgToServer" label="上传图片到服务器" @change="onUpdateEvent"></switch-normal>
    <textarea-normal v-if="isHiddenCompIds" v-model="saveImg.comps[1].attrs.hiddenCompIds" label="截图隐藏组件组" placeholder="[id,id]"  @change="onUpdateEvent"></textarea-normal>
    <input-normal v-if="saveImg.comps[3] && saveImg.comps[3].attrs.value == SAVE_IMG_DATA_TYPES[0].value" v-model="saveImg.comps[3].attrs.quality" label="图片质量" placeholder="0.8"  @change="onUpdateEvent"></input-normal>
  </el-form>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { SAVE_IMG_DATA_TYPES } from '@/const/'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebComponent = useWebComponentStore()
const saveImg = computed(() => {
  return useWebComponent.currentComponentData!.events.saveImg
})
const isUploadImgToServer = computed(() => {
  const event = useWebComponent.currentComponentData!.events.saveImg
  if(event) {
    return event.comps[2] && event.comps[2].attrs.value && event.comps[2].attrs.value.length > 0
  } else {
    return false
  }
})
const isHiddenCompIds = computed(() => {
  const event = useWebComponent.currentComponentData!.events.saveImg
  if(event) {
    return !event.comps[1].attrs.value || event.comps[1].attrs.value.length <= 0
  } else {
    return true
  }
})
const onUpdateEvent = () => {
  const event = useWebComponent.currentComponentData!.events.saveImg
  useWebComponent.updateEvent({ type: event.type, event })
}
</script>